// 该组件尝试在午夜到早上 6 点期间，将 <h1> 的 CSS 类设置为 "night"，而在其他时间都设置为 "day"。
// 但它不起作用。你能修复这个组件吗？
// 你可以临时更改计算机的时区来验证你的解决方案是否有效。
// 当前时间位于午夜至早上六点之间时，时钟应该有相反的颜色！

// 在这个例子中，副作用（修改 DOM）完全没有必要。你只需要返回 JSX。

// export default function Clock({ time }) {
//   let hours = time.getHours();
//   let className;
//   if (hours >= 0 && hours <= 6) {
//     className = 'night';
//   } else {
//     className = 'day';
//   }
//   return (
//     <h1 className={className}>
//       {time.toLocaleTimeString()}
//     </h1>
//   );
// }

import styles from './index.module.css';
export default function Clock({ time }) {
  const hours = time.getHours();
  const className = hours >= 0 && hours <= 6 ? styles.night : styles.day;
  return <h1 className={className}>{time.toLocaleTimeString()}</h1>;
}
